<template>
  <div class="loginbox">
    <div class="registerbox">
      
        <el-form ref="ruleForm2" :model="ruleForm2" :rules="rules" label-width="70px">
          <el-form-item label="区域：">
            <el-select v-model="ruleForm2.province" @change="changeCity" filterable placeholder="选择省份" style="width:110px">
              <el-option v-for="item in ruleForm2.options1" :key="item.id" :label="item.areaname" :value="item.id" > </el-option>
            </el-select>
            <el-select v-model="ruleForm2.city" @change="changeArea" filterable placeholder="选择城市" style="width:110px">
              <el-option v-for="item in ruleForm2.options2" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
            </el-select>
            <el-select v-model="ruleForm2.area" @change="changeVal" filterable placeholder="选择区" style="width:110px">
              <el-option v-for="item in ruleForm2.options3" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店：" prop="hospital_name" >
            <el-input v-model="ruleForm2.hospital_name" placeholder="请输入门店全称 如：牙记口腔南山机构"></el-input>
          </el-form-item>
          <el-form-item label="账号：" prop="account_name" >
            <el-input v-model="ruleForm2.account_name" placeholder="门店名称首字母与数字组合，如yjkqnsjg001"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="psw">
            <el-input type="password" v-model="ruleForm2.psw"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" ></el-input>
          </el-form-item>
        </el-form>
         <el-button type="primary" style="width:100%" @click="goHome('ruleForm2')">登  录</el-button>
         <div><el-button style="width:100%;margin-top:10px" @click="backFun">返  回</el-button></div>
     </div>
  </div>
</template>
<script>
import crypto from 'crypto'
import Http from '@/Http/Http'
import {mapActions,mapGetters,mapState} from 'vuex'
export default {
  data() {
    const account_name = (rele,value,callback) => {
      const reg = /^[a-z0-9]$/g;
      if(value ===''){
        return callback(new Error('请输入账号'))
      }  else  {
        callback()
      }
    }
    const hospital_name = (rele,value,callback) => {
      if(value ===''){
        return callback(new Error('请输入门店名称'))
      } else {
        callback()
      }
    }
    const psw = (rele,value,callback) => {
      if(value ===''){
        return callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm2.psw) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {    
      ruleForm2: {
        options1:[],
        options2:[],
        options3:[],
        hospital_name:'', //门店
        province:'',//省
        city:'',//市
        area:'',//区
        account_name:'',
        psw:'',
        checkPass:''
      },
      rules:{
        account_name:[
          {validator:account_name,trigger:'blur'}
        ],
        hospital_name:[
          {validator:hospital_name,trigger:'blur'}
        ],
        psw:[
          {validator:psw,trigger:'blur'}
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  
  created(){
    Http.getAreaList(0)
    .then( res => {
      this.ruleForm2.options1 = res.data.data;
    })
  },
  methods:{
    ...mapActions(['userNameFun']),
    goHome(val) {
       
      this.$refs[val].validate( (valid) => {
        if(!this.ruleForm2.province || !this.ruleForm2.city){
          this.$message.error('请选择地址')
          return
        }
        if (!valid) { return};
        const md5 = crypto.createHash("md5");
          md5.update(this.ruleForm2.psw);
        const psw = md5.digest('hex')
        const obj = {
           "hospital_name":this.ruleForm2.hospital_name,
            "account_name":this.ruleForm2.account_name,
            "password":psw,
            "province_id":this.ruleForm2.province,
            "city_id":this.ruleForm2.city,
            "area_id":this.ruleForm2.area
        }
        console.log(obj)
        Http.register(obj)
        .then( res => {
          if( res.data.code == 200){
            this.$message.success('账号添加成功')
            this.$router.push('/')
          }else if( res.data.code == -1007){
            this.$message.error(res.data.message)
          } else {
            this.$message.error('账号添加失败')
          }
        })
        console.log(1212)
      })
    },
    
    changeCity(val){
      Http.getAreaList(val)
        .then( res => {
          this.ruleForm2.options2 = res.data.data;
          this.ruleForm2.options3 = '';
          this.ruleForm2.area = '';
          this.ruleForm2.city = '';
        })
    },
    changeArea(val){
      Http.getAreaList(val)
        .then( res => {
          this.ruleForm2.area = '';
          this.ruleForm2.options3 = res.data.data;
        })
    },
    changeVal(val){

    },
    backFun(){
      this.$router.push('/')
    }
  }
}
</script>
<style>
.loginbox{
 
  height: 100vh;
  background:#e5e5e5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.registerbox{
  width: 410px;
  padding:40px;
  background: #fff;
  border-radius: 10px;
}
</style>
